<template>
  <div>
    <!-- 展示图片-->
    <div class="showpic">
      <!-- 标题 -->
      <div class="top">
        <a class="room">客房与套房</a>
        <h1>四季客房</h1>
      </div>
      <!-- 图片 -->
      <div class="pic">
        <img src="../../public/img/guest/guest_02_03.jpg" alt="" />
      </div>
      <div class="text">
        <p>
          四季客房设计以温暖和谐的色调搭配红木家具，别具韵味。豪华设施齐备，宽敞的空间与窗外迷人的城市景色交相呼应，配备有大床或两张单人床及开放式衣柜，给予客人温馨放松、抒怀自在的感觉。
        </p>
        <a class="prices" href="">查看房价</a>
      </div>
    </div>
    <!-- 图册轮播图 -->
    <div class="swiperpic">
      <div class="heading">
        <h2>图册</h2>
      </div>
      <template>
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide>
            <img src="../../public/img/guest/guest_02_01.jpg" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/guest/guest_02_02.jpg" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/guest/guest_02_03.jpg" alt="">
          </swiper-slide>
          <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
          <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
        </swiper>
      </template>
    </div>
    <!-- 详情 -->
    <div class="details">
      <div class="container">
        <div class="heading">
          <h2>详情</h2>
        </div>
        <ul class="detaillist">
          <li class="left">
            <div class="text">
              <h3>床位</h3>
              <p>1 张特大床或 2 张单人床, 1 张折叠床或 1 张婴儿床</p>
            </div>
          </li>
          <li class="right">
            <div class="text">
              <h3>容纳人数</h3>
              <p>3 名成人，或 2 名成人和 1 名儿童</p>
            </div>
          </li>
          <li class="left">
            <div class="text">
              <h3>面积</h3>
              <p>59 平方米（635 平方英尺）. 7 – 22 层</p>
            </div>
          </li>
          <li class="right">
            <div class="text">
              <h3>浴室</h3>
              <p>1 间设备齐全的大理石浴室</p>
            </div>
          </li>
          <li class="left">
            <div class="text">
              <h3>景观</h3>
              <p>都市景观</p>
            </div>
          </li>
          <li class="right">
            <div class="text">
            <h3>独特特色</h3>
            <p>行政酒廊礼遇；客用盥洗室</p>
            </div>
          </li>
        </ul>
        <div class="facility">
          <a href="">配套设施</a>
        </div>
        <div class="foot">
          <span>
            我们非常乐意为您提供信息或解答疑问。
          </span>
          <a class="phone" href="">+86 (10) 5695 8888</a>
          <a class="cta" href="">联系我们</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 轮播图
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'

  export default {
    name: 'swiper-example-navigation swiper-example-centered-auto',
    title: 'Navigation + Centered slides + Auto slides per view',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {
          slidesPerView: 'auto',
          centeredSlides: true,
          spaceBetween: 30,
          loop: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
// 轮播图动画
  @media (max-width: 100%) {
    .swiper-button-next {
      right: 20px;
      transform: rotate(90deg);
    }
// 轮播图左右按钮
    .swiper-button-prev {
      left: 20px;
      transform: rotate(90deg);
    }
  }
  .swiper{
    margin-bottom: 70px;
    img{
      width: 100%;
    }  
    .swiper-slide{
      width: 60%;
    }
  }
// 样式
* {
  margin: 0;
  padding: 0;
  user-select: none;
}
.showpic {
  color: #fff;
  background-color: black;
  .top {
    width: 100%;
    text-align: center;
    height: 75px;
    padding: 30px 0;
    a {
      font-size: 16px;
      text-decoration: none;
      line-height: 24px;
      font-style: italic;
    }
    h1 {
      padding-top: 7px;
      font-size: 32px;
      line-height: 42px;
      letter-spacing: 5px;
    }
  }
  img {
    height: 680px;
    width: 100%;
  }
  .text {
    padding: 70px 0;
    p{
      text-align: center;
      font-size: 1.375rem;
      font-style: normal;
      font-weight: 400;
      letter-spacing: .0227272727em;
      line-height: 1.5em;
      margin: 0 auto;
      width: 700px;
    }
    a {
      margin: 0 auto;
      margin-top: 40px;
      display: block;
      width: 128px;
      letter-spacing: .3em;
      line-height: 37px;
      font-size: .625rem;
      font-weight: bold;
      color: black;
      text-decoration: none;
      text-align: center;
      background-color: white;
    }
    a:hover {
      background-color: black;
      color: white !important;
      transition: 0.4s;
      border: 1px solid white;
    }
  }
}

.swiperpic{
  .heading{
    h2{
      padding: 60px 0;
      font-size: 1.5rem;
      letter-spacing: 0.16em;
      line-height: 1.3em;
      text-align: center;
    }
  }
}
// 详情样式
.details{
  .container{
    width: 70%;
    margin: 0 auto;
    .heading{
      width: 100%;
      h2{
        font-size: 1.5rem;
        font-weight: 200;
        line-height: 1.3em;
        text-align: center;
        letter-spacing: .17em;
      }
    }
    ul{
      font-size: 1.125rem;
      font-weight: 400;
      letter-spacing: .0277777778em;
      line-height: 1.5em;
      margin: 40px 0 60px 0;
      list-style: none;
      overflow: hidden;
      li{
        border-top:1px solid black;
        margin: 20px 15px;
        // padding: 0 15px 20px 15px;
        width: 46%;
        float: left;
        
        .text{
          padding-top: 30px;
          h3{
            margin: 5px 0 20px 0;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .25em;
            line-height: 1.3333333333em;
          }
         p{
            font-size: .75rem;
            font-weight: 400;
            letter-spacing: .25em;
            line-height: 1.5em
         }
        }
      }
    }
    .facility{
      margin: 78px 0 110px 0;
       a {
        margin: 0 auto;
        height: 37px;
        display: block;
        width: 128px;
        letter-spacing: .3em;
        line-height: 37px;
        font-size: .625rem;
        font-weight: bold;
        color: white;
        text-decoration: none;
        text-align: center;
        background-color: black;
      }
      a:hover {
        background-color: white;
        color: black !important;
        transition: 0.4s;
        border: 1px solid black;
      }
    }
    .foot{
      background-color: #000;
      color: #fff;
      display: flex;
      flex-direction: row;
      padding: 25px 30px;
      width: 80%;
      margin: 70px auto;
      span{
        margin: 0 15px 0 0;
        text-align: left;
        font-size: 1.125rem;
        font-style: italic;
        font-weight: 400;
        letter-spacing: .0277777778em;
        line-height: 1.5em;
        width: 371px;
      }
      .phone{
        border: 0;
        border-bottom: 1px solid;
        color: #fff;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .25em;
        line-height: 1.3333333333em;
        padding: 0 0 3px;
        text-decoration: none;
      }
      .cta {
        margin: 0 auto;
        display: block;
        width: 128px;
        letter-spacing: .3em;
        line-height: 27px;
        font-size: .625rem;
        font-weight: bold;
        color: black;
        text-decoration: none;
        text-align: center;
        background-color: white;
        border: 1px solid black;
      }
      .cta:hover {
        background-color: black;
        color: white !important;
        transition: 0.4s;
        border: 1px solid white;
      }
    }
  }
}
</style>